<style>
    .text-icon {
      margin: 120px auto;
    }
    .text-icon .html {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 20px 40px;
    }
    .text-with-icon .text{
      width: 600px;
      margin-left: 60px;
      font-size: 24px;
      font-weight: 700;
      line-height: 32px; 
    }
    .text-with-icon .text p{
       margin: 8px 0 0;
       font-weight: normal;
       font-size: 16px;
    }
    .text-icon .html:not(:last-child){
      margin-bottom: 20px;
    }
    .text-bg-icon {
      background: #F4F8FC;
      padding: 120px 0;
      margin-bottom: 0;
    }
    .text-block-icon{
      display: grid;
      grid-template-columns: repeat(2,1fr);
      grid-gap: 20px;
    } 
    .text-block-icon .html {
      display: block;
      border-radius: 8px;
      background: #FFF;
      text-align: center;
      height: 100%;
    }
    .text-block-icon .text{
      max-width: 334px;
      margin: 10px auto 0;
      font-size: 16px;
      line-height: 24px;
    }
    .text-bg-icon .block-des{
      max-width: 780px;
      margin: 80px auto 0;
    }
    .text-block-icon .html svg{
      display: inline-block;
    }

    @media screen and (max-width: 990px){
      .text-with-icon .text{
        width: 100%;
      }
      .text-block-icon .text{
        padding: 0 12px;
      }
      .multicolumn-step-process .multicolumn-card__info{
        height: 100%;
      }
      .multicolumn-step-process .multicolumn-list{
        display: block;
      }
      .multicolumn-step-process .multicolumn-list__item{
        max-width: 100%;
        width: 100%;
        margin-bottom: 18px;
        height: 100%;
      }
      .multicolumn-step-process .multicolumn-card__info-desc{
        margin-top: 10px;
      }
      .multicolumn-step-process {
          padding-top: 60px;
      }
      .text-icon .html{
        display: block;
        padding: 0;
      }
      .text-with-icon .text {
          max-width: 100%;
          margin-left: 0;
          font-size: 16px;
          line-height: 24px;
      }
      .text-with-icon .icon {
        text-align: center;
      }
      .text-with-icon .icon svg{
        width: 64px;
        height: 64px;
      }
      .text-with-icon .text p {
          margin: 4px 0 0;
          font-weight: normal;
          font-size: 14px;
          line-height: 22px;
      }
      .text-bg-icon{
        padding: 60px 0;
        margin: 0;
      }
    }

    @media screen and (max-width: 750px){
     .text-icon {
        margin: 60px auto;
     }
     .text-block-icon .text{
        padding: 0;
        margin-top: 0;
      }
      .text-bg-icon .block-des{
        margin-top: 36px;
      }
     .text-block-icon {
        display: block;
        grid-template-columns: repeat(1,1fr);
        grid-gap: 0;
    }
     .text-block-icon .html{
      display: flex;
      padding: 20px;
     }
     .text-bg-icon .text {
      font-weight: normal;
      text-align: left;
      padding-left: 16px;
      }
      .text-bg-icon .icon svg {
          display: block;
          width: 40px;
          height: 40px;
      }
    }
</style>
<div class="text-icon {% if section.settings.block %} text-bg-icon {% endif %}">
  <div class="page-width">
    {% if section.settings.heading != blank %}
        <h2 class="heading title center">{{ section.settings.heading }}</h2>
    {% endif %}
    <div class="{% if section.settings.block %} block-des {% endif %}">
      <div class="text-with-icon {% if section.settings.block %} text-block-icon {% endif %}">
        {%- for block in section.blocks -%}
          <div class="html" {{ block.shopify_attributes }}>
              <div class="icon">
                  {% if block.settings.html !=blank %}
                      {{ block.settings.html }}
                  {% endif %}
                </div> 
                {% if block.settings.text != blank %}
                  <div class="text">{{ block.settings.text }}
                  {% if block.settings.richtext != blank %}
                      <div>{{ block.settings.richtext }}</div>
                  {% endif %}
                  </div>
                {% endif %}
          </div>
        {%- endfor -%}   
      </div>
    </div>
  </div>
</div>

{% schema %}
    {
      "name": "Text with icon",
      "tag": "section",
      "class": "spaced-section spaced-section--full-width",
      "settings": [
         {
            "type": "text",
            "id": "heading",
            "label": "Heading"
          },
          {
            "type": "richtext",
            "id": "richtext",
            "label": "Richtext"
          },
          {
            "type": "checkbox",
            "id": "block",
            "label": "IS block",
            "default": false
         }
      ],
      "blocks":[
      {
        "type": "text",
        "name": "text",
        "settings": [
            {
            "type": "html",
            "id": "html",
            "label": "html"
          },  
          {
            "type": "text",
            "id": "text",
            "label": "text"
          },
          {
            "type": "richtext",
            "id": "richtext",
            "label": "Richtext"
          }
        ]
      }
      ],
      "presets": [
        {
          "name": "Text with icon"
        }
      ]
    }
      {% endschema %}